<template>
      <div class="tab-bar-item" @click="itemClick">
        <div v-if="!isActive">
          <slot name="item-icon"></slot>
        </div>
        <div  v-else>
          <slot  name="item-icon-active"></slot>
        </div>
        <div :style="activeStyle">
          <slot  name="item-text"></slot>
        </div>
      </div>
</template>

<script>
    export default {
        name:"TabBarItem",
        props:{
          path: String,
          activeColor:{
            type:String,
            default: 'red'
          }
        },
        methods:{
          itemClick(){
            console.log(this.path)
              this.$router.replace(this.path)
          }
        },
        data(){
          return{
          }
        },
        computed:{
          //计算属性
          isActive(){
            return this.$route.path.indexOf(this.path)!==-1
          },
          //计算属性 动态绑定样式
          activeStyle(){
            return this.isActive?{color:this.activeColor}:{}
          }
        }
    }
</script>

<style scoped>

</style>
